<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet"> -->
    <link href="js/elementui/theme-chalk/index.css" rel="stylesheet">
    <title>我想对党说——后台弹幕审核管理</title>
</head>

<body>
    <div id="app">
        <el-select v-model="checkValue" placeholder="请选择类型" @change="searchLy">
            <el-option v-for="item in checkType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <!-- <el-button @click="searchLy">搜索</el-button> -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" min-width="5%">
            </el-table-column>
            <el-table-column prop="userName" label="姓名" min-width="10%">
            </el-table-column>
            <el-table-column prop="content" label="内容" min-width="50%">
            </el-table-column>
            <el-table-column prop="insertTime" label="时间" min-width="18%">
            </el-table-column>
            <el-table-column prop="status" label="审核状态" min-width="10%" :formatter="formatterStatus">
            </el-table-column>
        </el-table>
        <br />
        <!-- 分页组件 -->
        <!-- 
          size-change 每页最大变化
          current-change  当前最大变化
          layout 功能组件
       -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNum" :page-sizes="[10]" :page-size="page.pageSize"
            layout="total,prev,next" :total="total">
        </el-pagination>

        <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">取消选择</el-button>
            <el-button @click="passFun()">通过审核</el-button>
            <el-button @click="unPassFun()">不通过审核</el-button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script> -->
    <script src="js/elementui/index.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script> -->
    <script type="text/javascript" src="js/axios/dist/axios.js"></script>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                //列表数据
                tableData: [],
                //当前选中的列表
                multipleSelection: [],
                //select下拉框
                checkType: [{
                    value: 'pass',
                    label: '审核通过'
                }, {
                    value: 'fail',
                    label: '审核不通过'
                }, {
                    value: 'unreview',
                    label: '未审核'
                }],
                checkValue: 'unreview',
                //分页
                page: {
                    pageNum: 1, //当前页
                    pageSize: 10, //每页最大数
                },
                total: 0,
                //格式化后的列表
                JustDoItList: [],

            },
            created() {

                this.getList();
            },

            methods: {
                //格式化表格的状态列
                formatterStatus(row){
                    switch(row.status){
                        case 0:
                            return '未审核'
                            break;
                        case 1:
                            return '通过审核'
                            break;
                        case 2:
                            return '不通过审核'
                            break;
                    }

                },
                //加载未审核数据
                getList() {
                    axios.get("http://party.nwu.edu.cn/comment/" + this.checkValue + '/' + this.page.pageNum).then((response) => {

                        this.total = response.data.total;
                        // console.log("time", response.data.records[0].insertTime);
                        for (let i = 0; i < response.data.records.length; i++) {
                            
                            response.data.records[i].insertTime = new Date(response.data.records[i].insertTime).toLocaleDateString();
                        }
                        this.tableData = response.data.records;
                    })
                },
                //通过审核
                passFun() {
                    this.justDoIt(1)
                    this.updateList()
                },
                //不通过审核
                unPassFun() {
                    this.justDoIt(2)
                    this.updateList()
                },
                //将勾选的数据格式化成后端需要的格式
                justDoIt(type) {
                    let newData
                    this.JustDoItList.length = 0;
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        newData = { "id": this.multipleSelection[i].id, "status": type }
                        this.JustDoItList.push(newData)
                    }
                },
                //更新弹幕状态
                updateList() {
                    axios.post("http://party.nwu.edu.cn/comment/update", this.JustDoItList).then((response) => {
                        this.getList()
                    })
                },
                //搜索
                searchLy() {
                    this.page.pageNum = 1;
                    this.getList()
                },

                //取消选择
                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                //当前选中
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                    // console.log(this.multipleSelection)
                },
                //每页显示条数
                handleSizeChange(val) {
                    this.page.pageSize = val;
                    // this.getPersonalProjectList();
                },
                //当前页数
                handleCurrentChange(val) {
                    this.page.pageNum = val;
                    // this.getPersonalProjectList();
                    this.getList()
                },

            },
        })
    </script>
</body>

</html>